<template>
  <section class="search-music-container">
    <!--搜索框-->
    <van-search v-model="musicName" placeholder="搜索" @search="searchMusic" @clear="clearIpt"/>

    <!--搜索列表-->
    <div class="search-music-wrap">
      <loading :loading="searching"/>
      <div v-show="musicData.length">
        <div class="music-list flex flex-align text-overflow" v-for="(item,index) in musicData" :key="index"
             @click="getSongDetail(item)">
          <van-icon name="search"/>
          <span class="song-name">{{item.title}}</span>
          <span class="line"> - </span>
          <span class="singer">{{item.author}}</span>
        </div>
      </div>
    </div>

    <div class="history-wrap" v-show="!musicData.length">
      <p class="his-title">搜索历史</p>
      <span class="his-item" v-for="(item,index) in musicHis" :key="index" @click="searchByHis(item)">{{item}}</span>
    </div>


  </section>
</template>

<script lang="ts">
  import {Component, Vue} from "vue-property-decorator";
  import {Icon} from "vant";
  import {Search} from "vant";

  import loading from "@/components/loading.vue";

  import auth from "@/common/auth";

  @Component({
    components: {
      [Search.name]: Search,
      [Icon.name]: Icon,
      loading
    }
  })
  export default class ChannelPage extends Vue {
    private searching: boolean = false;

    private musicName: string = "";

    // 搜索的数组
    private musicData: object[] = [];

    // 历史记录
    private musicHis: string[] = [];

    mounted() {
      this.musicHis = auth.getMusicSearchHis();
    }

    // 查询歌曲
    searchMusic(name: string = this.musicName) {
      // 当历史存起来
      if (this.musicHis.indexOf(name) === -1) {
        this.musicHis.push(name);
        auth.setMusicSearch(name);
      }

      this.searching = true;
      this.$api.get("/searchMusic", {name}, "baseUrl2")
        .then((res: any) => {
          if (res && res.length) {
            this.musicData = res;
          }
        })
        .catch((e: any) => {
          this.$toast(e.msg);
        })
        .finally(() => {
          this.searching = false;
        });
    }

    // 按搜索历史搜索
    searchByHis(name: string) {
      this.musicName = name;
      this.searchMusic(name);
    }

    // 查询具体歌曲的信息
    getSongDetail(song) {
      this.searching = true;
      this.$api.get("/musicDetails", {id: song.songid}, "baseUrl2")
        .then((res: any) => {

        })
        .catch((e: any) => {
          this.$toast(e.msg);
        })
        .finally(() => {
          this.searching = false;
        });
    }

    // 清空输入框
    clearIpt() {
      this.musicData = [];
    }


  }
</script>

<style lang="scss">
  .search-music-container {
    padding: 16px 0 0;

    .search-music-wrap {
      .music-list {
        padding: 10px 16px;
        background: #fff;
        border-bottom: 1px solid #f4f4f4;
        .song-name {
          color: #333;
          font-size: 13px;
          margin-left: 10px;
        }
        .line {
          padding: 0 5px;
        }
        .singer {
          color: #888;
          font-size: 12px;
        }
      }
    }
    .empty-songs {
      margin: 20px auto;
    }

    .history-wrap {
      margin: 30px 0;
      padding: 16px 16px;
      background: #F4F4F4;
      .his-title {
        margin: 0 0 20px 0;
      }
      .his-item {
        color: #333;
        font-size: 12px;
        padding: 6px 12px;
        border-radius: 99px;
        background: #e3e3e3;
        margin: 0 10px 10px 0;
      }
    }
  }
</style>

